<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Solr查询产品界面</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="/webjars/bootstrap/5.2.0/css/bootstrap.min.css"/>
    <style>
        .mainCSS {
            margin: 0 auto;
            width: 1050px;
        }

        * {
            padding: 0;
            margin: 5px;
            list-style: none;
        }

        html, body {
            width: 100%;
        }

        #wrap {
            width: 1050px;
            margin: 0 auto;
        }

        #wrap ul {
            width: 100%;
            background-color: lightgray;
            box-sizing: border-box;
        }

        #wrap li {
            width: 100%;
            float: left;
            border: 1px solid #000;
            box-sizing: border-box;
        }

        #wrap li img {
            width: 95%;
        }
    </style>
</head>
<body>
<div class="mainCSS">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Solr查询商品</h3>
        </div>
        <div class="panel-body">
            <form class="form-inline" method="post" action="/search" role="form">
                <div class="form-group">
                    <label class="sr-only" for="name"></label>
                    <input type="text" class="form-control" size="120" name="name" id="name" placeholder="请输入搜索内容"/>
                </div>
                <button type="submit" class="btn btn-info">搜 索</button>
            </form>
        </div>
    </div>
</div>
<div id="wrap">
    <ul th:each="pro:${list}">
        <li>
            <img th:src="${pro.picUrl}" alt="" style="width: 300px;height: 300px;"/>
            <p><strong>商品名称：</strong><span th:utext="${pro.name}"></span></p>
            <p><strong>销售价格：</strong><span th:text="${pro.sellingPrice}"></span></p>
            <p><strong>月销售量：</strong><span th:text="${pro.salesVolume}"></span></p>
        </li>
    </ul>
</div>
</body>
</html>